<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .container {
            width: 850px;
            margin: 100px auto 0;
            padding: 20px;
            background: #eee;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .cell {
            text-align: center;
            height: 40px;
            width: 90px;
            color: white;
            background: blue;
            border: 1px solid #FFFFFF;
            line-height: 40px;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            float: left;
        }

        .cell:hover {
            transform: scale(1.2);
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script>
        //找到容器
        var containerEle = document.querySelector('.container')
        var html = ''
        for(var row=1;row<=9;row++){
            var rowHtml = ''
            var cellsHtml = ''
            for(var col=1;col<=row;col++){
                var cellHtml = 
                `<div class="cell">
                    <span data-value="${col*row}" data-exp="1${col}×${row}=${col*row}">${col}×${row}=${col*row}</span>
                </div>`
                cellsHtml += cellHtml
            }
            rowHtml =  
            `<div class="row clearfix">
                ${cellsHtml}
            </div>`
            html += rowHtml
        }
        containerEle.innerHTML = html
        

        //找到所有的格子，返回一个NodeList
        var allCellEles = document.querySelectorAll('.cell')
        for(var i=0;i<allCellEles.length;i++){
            // 遍历所有格子
            var curCell = allCellEles[i]
            //给当前格子绑定鼠标指针移入事件
            curCell.addEventListener('mouseenter',function(e){
                //this代表当前触发事件的元素cell
                //找到格子里面的span
                var span = this.firstElementChild
                //获取span的自定义属性
                var res = span.dataset.value
                console.log(res)
                //把res设置span的内容
                span.innerText = res
                
            })
            //给当前格子绑定鼠标指针移出事件
            curCell.addEventListener('mouseleave',function(e){
                var span = this.firstElementChild
                var exp = span.dataset.exp
                span.innerText = exp
            })
        }

    </script>
</body>

</html>